<div class="WorkflowNotification" *ngIf="notification">
    <form nz-form nzLayout="vertical">
        <div class="help">
            <div markdown [data]="'workflow_notification_explanation' | translate"></div>
        </div>
        <nz-row>
            <nz-col [nzSpan]="10">
                <nz-form-item>
                    <nz-form-label>Notification type</nz-form-label>
                    <nz-form-control>
                        <nz-select *ngIf="!readOnly" nzShowSearch name="type" [(ngModel)]="notification.type" (ngModelChange)="formatNode()">
                            <nz-option *ngFor="let notifType of types" [nzValue]="notifType" [nzLabel]="notifType"></nz-option>
                        </nz-select>
                        <input nz-input *ngIf="readOnly" type="text" name="type" [ngModel]="notification.type"
                               [readonly]="true">
                    </nz-form-control>
                </nz-form-item>
            </nz-col>
            <nz-col [nzSpan]="14">
                <nz-form-label>Pipelines</nz-form-label>
                <nz-form-control>
                    <nz-select nzShowSearch *ngIf="!readOnly" name="nodes" nzMode="multiple" [(ngModel)]="notification.source_node_ref">
                        <nz-option *ngFor="let n of nodes" [nzLabel]="n.name" [nzValue]="n.name"></nz-option>
                    </nz-select>
                    <input nz-input *ngIf="readOnly" type="text" name="nodes"
                           [ngModel]="notification.source_node_ref ? notification.source_node_ref.join(',') : ''"
                           [readonly]="true">
                </nz-form-control>
            </nz-col>
        </nz-row>
        <ng-container *ngIf="notification.type === 'email'">
            <nz-row >
                <nz-col [nzSpan]="8">
                    <nz-form-item>
                        <nz-form-label>Send on success</nz-form-label>
                        <nz-form-control>
                            <ng-container
                                    *ngIf="notification && notification.settings && notification.settings.on_success && notifOnSuccess">
                                <nz-select nzShowSearch *ngIf="!readOnly" name="onsuccess"
                                           [(ngModel)]="notification.settings.on_success" >
                                    <nz-option *ngFor="let n of notifOnSuccess" [nzValue]="n" [nzLabel]="n">
                                    </nz-option>
                                </nz-select>
                                <input nz-input *ngIf="readOnly"type="text" name="onsuccess"
                                       [ngModel]="notification.settings.on_success" [readonly]="true">
                            </ng-container>
                        </nz-form-control>
                    </nz-form-item>
                </nz-col>
                <nz-col [nzSpan]="8">
                    <nz-form-item>
                        <nz-form-label>Send on error</nz-form-label>
                        <nz-form-control>
                            <nz-select nzShowSearch *ngIf="!readOnly" name="onfailure"
                                       [(ngModel)]="notification.settings.on_failure">
                                <nz-option *ngFor="let n of notifOnFailure" [nzValue]="n" [nzLabel]="n">
                                </nz-option>
                            </nz-select>
                            <input nz-input *ngIf="readOnly" type="text" name="onfailure"
                                   [ngModel]="notification.settings.on_failure" [readonly]="true">
                        </nz-form-control>
                    </nz-form-item>
                </nz-col>
                <nz-col [nzSpan]="8">
                    <nz-form-item>
                        <nz-form-label>Send on start</nz-form-label>
                        <nz-form-control>
                            <nz-switch [disabled]="readOnly" name="onstart"
                                       [(ngModel)]="notification.settings.on_start"
                                       [nzCheckedChildren]="checkedTemplate"
                                       [nzUnCheckedChildren]="unCheckedTemplate"
                            ></nz-switch>
                        </nz-form-control>
                    </nz-form-item>
                </nz-col>
            </nz-row>
            <nz-row>
                <nz-col [nzSpan]="12">
                    <nz-form-item>
                        <nz-form-label>Mails</nz-form-label>
                        <nz-form-control>
                            <input nz-input type="text" name="users" [(ngModel)]="selectedUsers" [readonly]="readOnly">
                        </nz-form-control>
                    </nz-form-item>
                </nz-col>
                <nz-col [nzSpan]="6">
                    <nz-form-item>
                        <nz-form-label>Send to group</nz-form-label>
                        <nz-form-control>
                            <nz-switch [disabled]="readOnly" name="togroup"
                                       [(ngModel)]="notification.settings.send_to_groups"
                                       [nzCheckedChildren]="checkedTemplate"
                                       [nzUnCheckedChildren]="unCheckedTemplate"
                            ></nz-switch>
                        </nz-form-control>
                    </nz-form-item>
                </nz-col>
                <nz-col [nzSpan]="6">
                    <nz-form-item>
                        <nz-form-label>Send to initiator</nz-form-label>
                        <nz-form-control>
                            <nz-switch [disabled]="readOnly" name="toInitiator"
                                       [(ngModel)]="notification.settings.send_to_author"
                                       [nzCheckedChildren]="checkedTemplate"
                                       [nzUnCheckedChildren]="unCheckedTemplate"
                            ></nz-switch>
                        </nz-form-control>
                    </nz-form-item>
                </nz-col>
            </nz-row>
            <nz-row>
                <nz-col [nzSpan]="24">
                    <nz-form-item>
                        <nz-form-label>Subject</nz-form-label>
                        <nz-form-control>
                            <input nz-input type="text" name="title" [(ngModel)]="notification.settings.template.subject"
                                   [readonly]="readOnly">
                        </nz-form-control>
                    </nz-form-item>
                </nz-col>
            </nz-row>
            <nz-row>
                <nz-col [nzSpan]="24">
                    <nz-form-item>
                        <nz-form-label>Message</nz-form-label>
                        <nz-form-control>
                             <textarea nz-input type="text" rows="8" [(ngModel)]="notification.settings.template.body" name="body"
                                       [readonly]="readOnly"></textarea>
                        </nz-form-control>
                    </nz-form-item>
                </nz-col>
            </nz-row>
            <nz-row>
                <nz-col [nzSpan]="24">
                    <nz-form-item>
                        <nz-form-label>Conditions</nz-form-label>
                        <nz-form-control>
                            <app-conditions *ngIf="!loading" [project]="project"
                                            [readonly]="!project.permissions.writable || readOnly" [triggerConditions]="triggerConditions"
                                            [(conditions)]="notification.settings.conditions">
                            </app-conditions>
                        </nz-form-control>
                    </nz-form-item>
                </nz-col>
            </nz-row>
        </ng-container>
        <ng-container *ngIf="notification.type === 'vcs'">
            <nz-row>
                <nz-col [nzSpan]="8">
                    <nz-form-item>
                        <nz-form-label>Send status on commit</nz-form-label>
                        <nz-form-control>
                            <nz-switch [disabled]="readOnly" name="statusEnabled"
                                       [(ngModel)]="statusEnabled"
                                       [nzCheckedChildren]="checkedTemplate"
                                       [nzUnCheckedChildren]="unCheckedTemplate"
                            ></nz-switch>
                        </nz-form-control>
                    </nz-form-item>
                </nz-col>
                <nz-col [nzSpan]="8">
                    <nz-form-item>
                        <nz-form-label>Pull-request's comment enabled</nz-form-label>
                        <nz-form-control>
                            <nz-switch [disabled]="readOnly" name="prEnabled"
                                       [(ngModel)]="commentEnabled"
                                       [nzCheckedChildren]="checkedTemplate"
                                       [nzUnCheckedChildren]="unCheckedTemplate"
                            ></nz-switch>
                        </nz-form-control>
                    </nz-form-item>
                </nz-col>
                <nz-col [nzSpan]="8">
                    <nz-form-item>
                        <nz-form-label>Always send</nz-form-label>
                        <nz-form-control>
                            <nz-switch [disabled]="!commentEnabled || readOnly" name="alwaysSend"
                                       [(ngModel)]="alwaysSend"
                                       [nzCheckedChildren]="checkedTemplate"
                                       [nzUnCheckedChildren]="unCheckedTemplate"
                            ></nz-switch>
                        </nz-form-control>
                    </nz-form-item>
                </nz-col>
            </nz-row>
            <nz-row>
                <nz-col [nzSpan]="24">
                    <nz-form-item>
                        <nz-form-label>Pull-request's comment body</nz-form-label>
                        <nz-form-control>
                            <textarea nz-input type="text" rows="8" [(ngModel)]="notification.settings.template.body"
                                      [disabled]="!commentEnabled" name="body" [readonly]="readOnly"></textarea>
                        </nz-form-control>
                    </nz-form-item>
                </nz-col>
            </nz-row>
        </ng-container>
        <nz-form-item>
            <nz-form-control>
                <ng-container *ngIf="canDelete && !readOnly">
                    <button nz-button nzDanger nzType="primary" [nzLoading]="loading"
                            nz-popconfirm nzPopconfirmTitle="Are you sure you want to delete this notification ?"
                            (nzOnConfirm)="deleteNotification()">Delete</button>
                </ng-container>
                <button nz-button *ngIf="!readOnly" nzType="primary" name="save" [nzLoading]="loading"
                        class="floatRight" [disabled]="loading" (click)="createNotification()">
                    <span *ngIf="!editMode && canDelete">Save</span>
                    <span *ngIf="!editMode && !canDelete">Add</span>
                    <span *ngIf="editMode">Apply</span>
                </button>
            </nz-form-control>

        </nz-form-item>

    </form>
</div>
<ng-template #checkedTemplate><i nz-icon nzType="check"></i></ng-template>
<ng-template #unCheckedTemplate><i nz-icon nzType="close"></i></ng-template>
